<template>
<div>
		<div class="shopBox">
			<div class="" style="background-color: #F2F6FC;line-height: 35px;text-align: center;">
				购物车
			</div>
			<div>
				<div v-for="(item, index) in shopArr" :key="index" class="content">
					<div class="titlt">
						<ul class="titlt list">
							<li>
								<el-checkbox v-model="item.checked" @change="shopArrChange(index)">{{ item.shopName }}</el-checkbox>
							</li>
						</ul>
					</div>
					<div>
						<ul class="titlt list shop" v-for="(shopInfo, shopIndex) in item.shopList" :key="shopIndex">
							<li>
								<el-checkbox v-model="shopInfo.checked" @change="shopInfoChange(index)">{{ shopInfo.name }}</el-checkbox>
							</li>
							<li>{{ shopInfo.remark }}</li>
							<li>￥{{ shopInfo.price }}</li>
							<li><el-input-number v-model="shopInfo.number" :min="1" @change="shopNumberChange(index) "></el-input-number></li>
						</ul>
					</div>
					<div class="shopFooter">
            <el-checkbox v-model="checked" @change="allShopChange">全选</el-checkbox>
						<div style="color: #ff5777;">共计{{ item.shopNum }}类</div>
						<div style="color:#ff5777 ;">￥{{ item.totalPrices }}</div>
						<div><el-button type="success">结算</el-button></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
var shopArr = [
	{
		shopName: '基因重组店铺', //店铺名
		checked: false, //选中
		shopNum: 0, //选中商品数
		totalPrices: 0, //总价
		shopList: [
			{
				name: '双肩包',
				remark: '',
				price: 129,
				number: 1,
				checked: false
			},
			{
				name: '手提包',
				remark: '',
				price: 68.9,
				number: 1,
				checked: false
			},
			{
				name: '钱包',
				remark: '',
				price: 32.9,
				number: 1,
				checked: false
			}
		]
	}

		
	
];
export default {
    name: 'Cart',
    data() {
		return {
			shopArr: shopArr,
			checked: false //商品全选
		};
	},
	mounted() {
		console.log(this.shopArr);
	},
	watch: {
		// checked(val) {
		// 	if (val) {
		// 		this.allShopChange();
		// 	}
		// }
	},
	methods: {
		allShopChange() {
			//所有商品选中
			// this.checked == true? false:true;
			if (this.checked == true) {
				for (let i = 0; i < this.shopArr.length; i++) {
					this.shopArr[i].checked = true;
					this.shopArr[i].shopNum = this.shopArr[i].shopList.length;
					for (let j = 0; j < this.shopArr[i].shopList.length; j++) {
						this.shopArr[i].shopList[j].checked = true;
						if (this.shopArr[i].shopList[j].number > 0) {
							this.shopArr[i].totalPrices += this.shopArr[i].shopList[j].price * this.shopArr[i].shopList[j].number;
						}
					}
				}
			} else {
				for (let i = 0; i < this.shopArr.length; i++) {
					this.shopArr[i].checked = false;
					this.shopArr[i].shopNum = 0;
					this.shopArr[i].totalPrices = 0;
					for (let j = 0; j < this.shopArr[i].shopList.length; j++) {
						this.shopArr[i].shopList[j].checked = false;
					}
				}
			}
		},
		deleteShop(index,shopIndex) {
			//删除
			this.shopArr[index].shopNum = 0
			this.shopArr[index].totalPrices = 0
			this.shopArr[index].shopList.splice(shopIndex,1)
			this.shopArr[index].shopList.forEach(item => {
				if (item.checked) {
					this.shopArr[index].shopNum++;
					if (item.number > 0) {
						this.shopArr[index].totalPrices += item.price * item.number;
					}
				}
			});
			if(this.shopArr[index].shopList.length == 0){
				this.shopArr.splice(index,1)
			}
		},
		shopArrChange(index) {
			//分类商品全选
			// console.log(index);
			// this.shopArr[index]
			if (this.shopArr[index].checked) {
				for (let i = 0; i < this.shopArr[index].shopList.length; i++) {
					this.shopArr[index].shopList[i].checked = true;
					this.shopArr[index].shopNum = this.shopArr[index].shopList.length;
					if (this.shopArr[index].shopList[i].number > 0) {
						this.shopArr[index].totalPrices += this.shopArr[index].shopList[i].price * this.shopArr[index].shopList[i].number;
					}
				}
			} else {
				for (let i = 0; i < this.shopArr[index].shopList.length; i++) {
					this.shopArr[index].shopList[i].checked = false;
				}
				this.shopArr[index].totalPrices = 0;
				this.shopArr[index].shopNum = 0;
			}
			// 判断是否全选
			if (this.shopArr.findIndex(item => item.checked === false) == -1) {
				this.checked = true;
			} else {
				this.checked = false;
			}
		},
		shopInfoChange(index) {
			this.shopArr[index].shopNum = 0
			this.shopArr[index].totalPrices = 0
			if (this.shopArr[index].shopList.findIndex(item => item.checked === false) == -1) {
				this.shopArr[index].checked = true;
				this.shopArr[index].shopNum = this.shopArr[index].shopList.length;
				this.shopArr[index].shopList.forEach(item => {
					if (item.number > 0) {
						this.shopArr[index].totalPrices += item.price * item.number;
					}
				});
			} else {
				this.shopArr[index].checked = false;
				this.shopArr[index].shopList.forEach(item => {
					if (item.checked) {
						this.shopArr[index].shopNum++;
						if (item.number > 0) {
							this.shopArr[index].totalPrices += item.price * item.number;
						}
					}
				});
			}
		},
		shopNumberChange(index){
			console.log(index)
			this.shopArr[index].shopNum = 0
			this.shopArr[index].totalPrices = 0
			this.shopArr[index].shopList.forEach(item => {
				if (item.checked) {
					this.shopArr[index].shopNum++;
					if (item.number > 0) {
						this.shopArr[index].totalPrices += item.price * item.number;
					}
				}
			});
		}
	}
};

</script>

<style src = "./index.scss"></style>